<template>
    <div class="container">
        <div class="bg-img"></div>
        <div class="content">
            <h2 class="title">System Login</h2>
            <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
                <div class="username">
                    <span class="iconfont">&#xe61b;</span>
                    <el-form-item prop="username">
                        <el-input type="text" placeholder="Username" v-model.trim="loginForm.username" size="medium" clearable></el-input>
                    </el-form-item>
                </div>
                <div class="password">
                    <span class="iconfont">&#xe602;</span>
                    <el-form-item prop="password">
                        <el-input type="password" placeholder="Password" v-model.trim="loginForm.password" size="medium" clearable @keyup.enter.native="onSubmit('loginForm')"></el-input>
                    </el-form-item>
                </div>
                <div class="submit">
                    <el-form-item>
                        <el-button type="primary" size="medium" @click.enter="onSubmit('loginForm')">登录</el-button>
                    </el-form-item>
                </div>
                <div class="nosubmit">
                    <el-button type="text">忘记密码</el-button>
                    <span>|</span>
                    <el-button type="text">立即注册</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: ''
            },
            loginRules: {
                username: [
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'change'
                    },
                    {
                        min: 6,
                        max: 12,
                        message: '用户名长度为6~12字节'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入登录密码',
                        trigger: 'change'
                    }
                ]
            }
        };
    },
    methods: {
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let username = this.loginForm.username;
                    let password = this.loginForm.password;
                    if (username === 'xiaoming' && password === '123456') {
                        this.$router.push({ path: '/index' });
                    } else {
                        this.$message({
                            message: '用户名或密码错误!',
                            type: 'error'
                        });
                        const ele = this.$createElement;
                        this.$notify({
                            title: '提示',
                            dangerouslyUseHTMLString: true,
                            message: '<p>账号：xiaoming<p><p>密码：123456</p>'
                        });
                        return false;
                    }
                } else {
                    return false;
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
@import '../assets/less/login.less';
</style>

<style lang="less">
/* 修改 element-ui 样式 不可加 scoped 参数 */
.username,
.password {
    .el-input .el-input__inner {
        padding-left: 45px;
    }
}
.submit .el-button {
    width: 100%;
}
.nosubmit {
    .el-button--text {
        color: #fff;
    }
}
</style>




